<style>
	/* .thumbnail { height: 280px !important; }*/
      .btn-droppable { width: 180px; height: 30px; padding-left: 4px; }
      .btn-draggable { width: 160px; }
      .row-fluid [class*="span"]:first-child {
    margin-left: 0;
}

.row-fluid [class*="span"] {
    display: block;
    float: left;
    width: 100%;
    min-height: 30px;
    margin-left: 2.127659574468085%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.thumbnails>li {
    float: left;
    margin-bottom: 20px;
    margin-left: 20px;
}
.row-fluid .span3 {
    width: 23.404255319148934%;
}
.span3 {
    width: 220px;
}
[class*="span"] {
    float: left;
    min-height: 1px;
    margin-left: 20px;
}

.btn {
    display: inline-block;
    padding: 4px 14px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    color: #333;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255,255,255,0.75);
    vertical-align: middle;
    cursor: pointer;
    background-color: #f5f5f5;
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
    background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
    background-image: -o-linear-gradient(top,#fff,#e6e6e6);
    background-image: linear-gradient(to bottom,#fff,#e6e6e6);
    background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
    background-repeat: repeat-x;
    border: 1px solid #bbb;
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-bottom-color: #a2a2a2;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
    filter: progid:dximagetransform.microsoft.gradient(enabled=false);
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.05);
}
.btn {
    border-color: #c5c5c5;
    border-color: rgba(0,0,0,0.15) rgba(0,0,0,0.15) rgba(0,0,0,0.25);
}
.btn-info {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
    background-color: #49afcd;
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#5bc0de),to(#2f96b4));
    background-image: -webkit-linear-gradient(top,#5bc0de,#2f96b4);
    background-image: -o-linear-gradient(top,#5bc0de,#2f96b4);
    background-image: linear-gradient(to bottom,#5bc0de,#2f96b4);
    background-image: -moz-linear-gradient(top,#5bc0de,#2f96b4);
    background-repeat: repeat-x;
    border-color: #2f96b4 #2f96b4 #1f6377;
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff5bc0de',endColorstr='#ff2f96b4',GradientType=0);
    filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
</style>
<div class="index-main">
		<!--<h1 class="text-center">首页</h1>  -->
 		<h2 class="text-center" style="color: #fff;">拖拽</h2>
		 <div class='content'>
          <div class="row-fluid">
            <!--<ul class="thumbnails">
           
              <li class="span3" style='margin-left:10px;'>
                <div class="thumbnail" data-drop="true"  ng-model='list2' data-jqyoui-options="{accept:'.btn-draggable:not([ng-model=list2])'}"  jqyoui-droppable="{multiple:true}">
                 
                  <div class="caption">
                    <div class="btn btn-info btn-draggable" ng-repeat="item in list2" 
                    	data-drop="true"
                    	data-drag="{{item.drag}}" 
                    	ng-model="list2"
                    	jqyoui-draggable="{index: {{$index}},animate:true, insertInline: true, direction:'jqyouiDirection'}"
                    	data-jqyoui-options="{revert: 'invalid'}" 
              			data-direction="{{item.jqyouiDirection}}"
                    	>{{item.title}}</div>
                  </div>
                </div>
              </li>
              <li class="span3" style='margin-left:10px;'>
             
                <div class="thumbnail" data-drop="true"  ng-model='list3' data-jqyoui-options="{accept:'.btn-draggable:not([ng-model=list3])'}"  jqyoui-droppable="{multiple:true}">
                  <div class="caption">
                    <div class="btn btn-info btn-draggable" ng-repeat="item in list3" ng-show="item.title"
                    	data-drop="true"
                    	data-drag="{{item.drag}}" 
                    	ng-model="list3"
                    	jqyoui-draggable="{index: {{$index}},animate:true,insertInline: true, direction:'jqyouiDirection'}"
						data-jqyoui-options="{revert: 'invalid'}" 
              			data-direction="{{item.jqyouiDirection}}"
                    	>{{item.title}}</div>
                  </div>
                </div>
              </li>

            </ul>-->
          </div>
        </div>
      </div>
     
</div>
